// login.tsx
// import StarfieldCanvas from "@/components/backgroundCanvas";
import styles from "./index.module.scss";
import { useEffect } from "react";
import initLoginBg from "./dark";
import { Button, Checkbox, Form, Input } from "antd";
import {
  GithubOutlined,
  LockOutlined,
  RadarChartOutlined,
  UserOutlined,
} from "@ant-design/icons";
import "./login.less";
import { useNavigate } from "react-router-dom";
// import { captchAPI } from "@/request/api";

const Login: React.FC = () => {
  const [form] = Form.useForm();
  const navigateTo = useNavigate();

  const onFinish = (values: any) => {
    console.log("form提交成功Success:", values);
    if (values.username === "123" && values.password === "123") {
      localStorage.setItem("token", "123456");
      navigateTo("/home");
    }
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log("Failed:", errorInfo);
  };

  // const getCaptchImg = () => {
  //   // 获取验证码图片
  //   console.log("请求数据");
  //   captchAPI().then((res) => {
  //     console.log("请求回来的数据", res);
  //   });
  // };
  // async + await 写法
  //  const getCaptchImg = async () => {
  //   const res = await captchAPI();
  //   console.log("请求回来的数据", res);
  //  }
  useEffect(() => {
    const stop = initLoginBg();
    window.onresize = function () {
      initLoginBg();
    };
    // 页面加载时候获取验证码图片
    // getCaptchImg()
    return () => stop();
  });
  return (
    <div className="loginContainer">
      <canvas
        onContextMenu={(e) => e.preventDefault()}
        id="canvas"
        style={{ display: "block" }}
      ></canvas>
      <div className={styles.loginBox}>
        <div className={styles.title}>
          <div className={styles.logo}>
            <GithubOutlined />
          </div>
          <div className={styles.subTitle}>安全机密系统</div>
        </div>
        <Form
          name="basic"
          labelCol={{
            span: 8,
          }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          form={form}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label={<span className={styles.customLabel}>账号</span>}
            name="username"
            rules={[{ required: true, message: "请输入你的账号" }]}
          >
            <Input
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="请输入账号"
            />
          </Form.Item>
          <Form.Item
            label={<span className={styles.customLabel}>密码</span>}
            name="password"
            rules={[{ required: true, message: "请输入你的密码" }]}
          >
            <Input.Password
              prefix={<LockOutlined className="site-form-item-icon" />}
              placeholder="请输入密码"
            />
          </Form.Item>
          <div style={{ position: "relative" }}>
            <Form.Item
              label={<span className={styles.customLabel}>验证码</span>}
              name="smscode"
              rules={[{ required: true, message: "请输入你的验证码" }]}
            >
              <Input
                prefix={<RadarChartOutlined className="site-form-item-icon" />}
                placeholder="请输入验证码"
              />
            </Form.Item>
            <img
              src=""
              alt="验证码"
              className={styles.imgCode}
            />
          </div>
          <Form.Item
            name="remember"
            valuePropName="checked"
            wrapperCol={{ offset: 8, span: 16 }}
          >
            <Checkbox>记住用户名</Checkbox>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              安全登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Login;
